<template>
    <div class="aaaa">
        <h3 class="qq">商家推荐</h3>
       <ul class="seller-list" >
          <li class="list-item" v-for="(seller, index) in sellers" :key="index" @click="detail(seller.id)">
            <div class="logo">
              <img :src="seller.logo">
            </div>
            <div class="detail">
              <h3 class="name">{{seller.name }}</h3>
              <div class="rating">
                <span>
                  <rate :max=5 :size="0.2415" :unit="'rem'" :score="seller.rating"></rate>
                </span>
                <span>{{seller.rating}}</span>
                <span>月售{{seller.orderNo}}单</span>
              </div>
              <div class="fee">
                <span>&yen;{{seller.sendFee}}起步</span>
                <span>配送费&yen;{{seller.deliveryFee}}</span>
                <span>{{seller.avgFree}}</span>
              </div>
            </div>
          </li>
    </ul>
    </div>
</template>

<script>
import Rate from '@/base/rate/rate'
import {mapGetters, mapActions} from 'vuex'
export default {
  components: {
    Rate
  },
  created () {
    this.$http.get('static/json/seller.json').then(response => {
      console.log(response.data)
      this.sellers = response.data
    })
  },
  data () {
    return {
      sellers: []
    }
  },
  computed: {
    ...mapGetters([
      'seller'
    ])
  },
  methods: {
    ...mapActions([
      'setSeller'
    ]),
    detail  (id) {
      // 通过商家ID去查找它的详细信息，然后储存在Vuex中,就算共享出去了
      let list = this.sellers
      for (var i = 0; i < list.length; i++) {
        if (list[i].id === id) {
          this.setSeller(list[i])
          this.$router.push('/seller')
          break
        }
      }
      console.log(this.seller)
    }
  }
}
</script>

<style lang='less' scoped>
.seller-list {
  background-color: #fff;
  position: relative;
  min-height: 300px;
  .list-item {
    display: flex;
    padding: 0.4rem 0;
    font-size: 0.293333rem;
    border-bottom: 0.013333rem solid #eee;
    a{
      display: flex;
      color:#333;
    }
    .logo {
      flex: none;
      width: 1.733333rem;
      height: 1.733333rem;
      padding: 0 0.266667rem;
      img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 0.053333rem;
        border: 0.133333vw solid rgba(0, 0, 0, 0.08);
      }
    }
    .detail {
      flex: 1;
      padding-left: 0.266667rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .h3 {
        font-size: 0.4rem;
      }
      div {
        color: #666;
      }
    }
  }
}
.shoplist-title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0.96rem;
  font-size: 0.4rem;
  color: #000;
  &::before,
  &::after {
    display: block;
    content: '';
    width: 0.53333rem;
    height: 0.026667rem;
    background-color: #999;
  }
  &::before {
    margin-right: 0.346667rem;
  }
  &::after {
    margin-left: 0.346667rem;
  }
}
</style>
